<template>

  <div class="container" v-if="value">
    <top-nav :toLastPath="true">
      返回
    </top-nav>
    <div class="header">
      <span>{{value.job_type}}</span>
      <span>{{value.salary_type}}{{value.salary_num}}</span>
    </div>
    <div class="details">
      <span><img src="http://file.rzkeji.com/web/recruit/icon/person.png"/>招{{value.people_num}}人</span>
      <span><img src="http://file.rzkeji.com/web/recruit/icon/gender.png"/> 性别 :{{value.sex}}</span>
    </div>
    <div class="company"  @click="goCompany(value.id)" v-if="value.info.company_info">
      <img :src="value.info.company_info.img_url" class="company_img"/>
      <div class="company_detals">
        <div class="company_name">{{value.info.company_info.name}}</div>
        <div class="guan" @click.stop="guan(value.user_id)">{{messgae}}</div>
        <div class="company_xx">
          <span>{{value.info.company_info.size}}</span>
          <!-- <span>{{value.info.company_info.industry}}</span> -->
        </div>
        <div class="company_city">{{value.province}} {{value.city==null? "" :value.city}} {{value.area==null?'':value.area}} {{value.town==null? "" :value.town}}</div>
      </div>
      <img src="http://file.rzkeji.com/web/recruit/icon/right.png" class="right"/>
    </div>

    <div class="describe">
      <ul class="describe_ul clearfix">
        <li>标签: </li>
        <li>招{{value.type}}</li>
        <!-- <li>{{value.info.trade_name}}</li> -->
      </ul>
      <div class="describe_title">岗位要求</div>
      <ul class="describe_requirement">
        {{value.desc}}
      </ul>
    </div>
    <ul class="img" v-if="value.position_img.length==0?false:true">
      <li v-for="(value,index) in value.position_img" :key="index" @click="imgPrev(index)" class="imgList" v-bind:style="{ 'background-image': 'url(' +value.img_url + ')','background-repeat':'no-repeat','background-size':'cover'}">
        <!-- <img :src="value.img_url" mode="aspectFill"/> -->
      </li>
    </ul>
    <div class="information">
      <div class="information_title">
        <span>联系方式</span>
        <span v-if="showLogin">请登陆后查看</span>
      </div>
      <div class="information_details">
        <!-- <div class="information_name"> <span>联系人 </span>{{value.info.user_type=='personal'?value.info.user_info.realname :value.info.company_info.contacts}}</div> -->
        <div class="information_name"> <span>联系人 </span>{{value.contact_name}}</div>
        <div class="information_tel">电话号码 <img src="http://file.rzkeji.com/web/recruit/icon/tel.png" class="company_img"/><span>{{value.info.user_type=='personal'?value.contact_phone :value.info.company_info.contact_phone}}</span></div>
        <div class="information_btn" v-if="showLogin">
          <div>
            <router-link to="/login">立即登陆</router-link>
          </div>
          <div>
            <router-link to="/register">免费注册</router-link>
          </div>
        </div>
        <div class="information_tip" v-if="showLogin">个人会员登陆后才可以查看联系方式</div>
        <div class="location">
          <img src="http://file.rzkeji.com/web/recruit/icon/address2.svg" class="location_tag"/>
          <div class="location_xx">
            <div class="location_details">{{value.province}}{{value.city==null? "" :value.city}}{{value.area==null?'':value.area}}{{value.town==null? "" :value.town}}</div>
            <div class="location_details">{{value.address_detail==null? "" :value.address_detail}}</div>
          </div>
        </div>

        <div class="report">
          <div class="report_tip">
            <!-- <span>如遇无效、虚假、诈骗信息，请立即举报</span> -->
            <span>如遇无效、虚假、诈骗信息，请立即举报</span>
          </div>
          <div class="report_tag">
            <router-link to="/me/help">
              <img src="http://file.rzkeji.com/web/recruit/icon/help1.png" class="error_tag"/>
              <div>举报</div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <footer1 :tel="value.info.user_type=='personal'?value.contact_phone :value.info.company_info.contact_phone" :id="value.id"></footer1>
    
  </div>
</template>

<script>
import { removeMyInterceptor} from '../../utils/interceptor' //移除拦截器
  import { ImagePreview } from 'vant';
  import footer1 from '@/components/footer'
  import topNav from '@/components/topNav'
  export default {
    data() {
      return {
        value: "",
        messgae: "",
        id: "",
        imgList:[],
        showLogin:''
      }
    },
    computed: {
      
    },
    components: {
      footer1,
      topNav
    },

    methods: {
      goCompany(value) {
        // this.$currency.navigateTo(`/pages/enterpriseInformation/main?id=${value}`)
        this.$router.push({name:'enterpriseInformation',params:{id:value}})
      },
      async guan(value) {
        let res = await this.$axios.post('/ucenter/setUserFollow', {user_token: this.userToken, f_user_id: value})
        this.messgae = res.data.data == 'follow' ? '取消关注' : '关注'
        // console.log(this.messgae)
        if(this.messgae!='关注'){
          this.$currency.showToast(res.data.message,'1500')
        }else{
          this.$currency.showToast(res.data.message,'1500','fail')
        }
        
      },
      async getData() {
        let res = await this.$axios('/position/getPositionDetail', {
          params: {
            id: this.id
          }
        });
        if(res.data.level=='success'){
          this.value = res.data.data;
          this.value.sex = this.$currency.sexTag1(this.value.sex);
          this.messgae = this.value.is_follow == 0 ? '关注' : '取消关注';
          let imgObj=res.data.data.position_img;
          this.imgList=[];//因为keepalive数据进行了缓存，下方push，会导致数据叠加
          imgObj.forEach(value=>{
            this.imgList.push(value.img_url)
          })
          // console.log(this.imgList)

        }
        
      },
      imgPrev(index){
        ImagePreview({
        images: this.imgList,
        startPosition: index,
        onClose() {
          // do something
        }
        });
      },
       judCertDeta(){
        if(window.localStorage.getItem('userToken')){
          this.showLogin=false
        }else{
          this.showLogin=true
        }
      }

    },
    activated() {
      this.id = this.$route.params.id;
      let _this=this
      this.getData()
      this.judCertDeta()
      removeMyInterceptor();//移除拦截器 避免跳转
      // this.$axios('/cert/judCertDeta').then(res=>{
        
      // })
    },
  }
</script>

<style scoped>
.container{padding-bottom: 80px;margin-top:45px;}
.header{margin-right:15px;margin-left: 15px;margin-top: 15px;}
.header span:nth-of-type(1){line-height: 40px;font-weight: bold;color: #484848;font-size: 28px;}
.header span:nth-of-type(2){line-height: 40px;color: #ff3300;font-size: 15px;float: right;}
.details{margin-right: 25px;margin-left: 25px;border-bottom: 1px #ebebeb solid;padding: 20px 0px;display: flex;justify-content: row;color: #484848;font-size: 12px;}
.details span{margin-right: 10px;}
.details img{width: 15px;height: 15px;margin-right:5px;vertical-align: middle;}
.company{margin-right: 22.5px;margin-left: 22.5px;padding: 20px 0px;display: flex;justify-content: space-around;align-items: center;border-bottom: 1px #ebebeb solid;}
.company_img{width: 65px;height: 65px;}
.company_detals{width: 235px;margin-left: 10px;}
.company_name{width: 100%;height: 21px;    color: #333;font-size: 16px;}
.guan{width: 61px;height: 21px;background: #38B4DB;border-radius: 8px;display: inline-block;color: #fff;line-height: 21px;font-size: 13px;text-align: center;}
.company_xx{width: 100%;color: #999;margin-top: 5px;}
.company_xx span{line-height: 22.5px;margin-right: 10px;font-size: 12px;}
.company_city{color: #999999;font-size: 12px;margin-top: 5px;}
.right{width: 20px;height: 20px;margin-top: 25.5px;}

.describe{margin-right: 22.5px;margin-left: 22.5px;padding: 20px 0px;border-bottom: 1px #ebebeb solid;}
.describe_ul{width: 310px;overflow: hidden;}
.describe_ul li{height: 30px;color: #484848;border: 1px #ebebeb solid;line-height: 30px;text-align: center;margin-right:7px;float: left;padding: 4px;font-size: 13px;border-radius: 27.5px;}
.describe_title,.describe_requirement{color: #666;word-wrap: break-word;font-size: 15px;line-height: 40px;}
.describe_requirement{margin-top: 5px;}
.describe_requirement li{margin-bottom:5px;line-height: 25px; }

.information{margin-right: 22.5px;margin-left: 22.5px;}
.information_title{width: 100%;padding: 15px 0px;}
.information_title span:nth-of-type(1){font-weight: 700;color: #484848;line-height: 50px;font-size: 16px;}
.information_title span:nth-of-type(2){color: #0180cf;float: right;font-size: 13px;line-height: 50px;}
.information_details{width: 300px;}
.information_name{font-weight: 700;color: #666;font-size: 19px;}
.information_name span:nth-of-type(1){color: #999;font-size: 12px;}
.information_tel{color: #484848;font-size: 12px;margin-top: 15px;}
.information_tel img{width: 15px;height: 15px;margin-left: 10px;margin-right: 5px;vertical-align: middle;}
.information_tel span:nth-of-type(1){color:red;font-size: 16px;font-family: Georgia,"Times New Roman",Times,serif;}
.information_btn{display: flex;justify-content: row;margin: 15px 0px;}
.information_btn div{width: 130px;line-height: 35px;text-align: center;color: #fff;    border-radius: 5px;    font-size: 15px;}
.information_btn div:nth-of-type(1){background: #08c;margin-right: 10px;}
.information_btn div:nth-of-type(2){    background: #ff9900;}
.information_tip{width: 280px;border-radius: 5px;color: #F26B01;text-align: center; font-size: 13px;background-color: #FFFFE9;border: 1px #F3EAC3 solid; line-height: 34px;margin-bottom:10px; }
.img{margin-left: 17.5px;margin-left: 17.5px;height: 100px;display: flex;justify-content: row;}
.img li{width: 105px;height: 100%;margin-left: 10px;}
/* .img li img{height: 100%;} */
.location{width: 280px;display: flex;justify-content: row;margin-top: 35px;}
.location_tag{width: 30px;height:30px;}
.location_xx{width: 260px;margin-left: 5px;}
.location_xx div{width: 100%;line-height: 20px;    color: #484848;font-size: 15px;line-height: 23px;}
.location_xx div:nth-of-type(2){font-size: 12px;}
.location_xx div:nth-of-type(2) span{    color: #0180cf;margin-left: 15px;}
.report{width: 345px;display: flex;justify-content: row;margin-top:45px;}
.report_tip{width: 280px;display:flex;align-items: center;}
.report_tip span{display: block;font-size: 13px;line-height: 23px;}
.report_tip span:nth-of-type(1){color: #ff552e;}
.report_tip span:nth-of-type(2){color: #333;}
.report_tag{float: right;width: 40px;    color: #ff552e;font-size: 12px;text-align: center;}
.report_tag img{width: 20px;height: 20px;margin-top: 5px;}

.imgList{
  display: flex;
  justify-content: center;
  align-items: center;
}
.information_btn a{color:#fff}
</style>